<!--
 * @Author: your name
 * @Date: 2021-03-31 09:46:31
 * @LastEditTime: 2021-04-22 14:08:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\Hotevents\details\index.vue
-->
<template>
  <div>
    <el-page-header @back="goBack" class="box-card go-back" content="详情页面">
    </el-page-header>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <div class="cardName">{{ row.name }}</div>
      </div>
      <div class="text item">
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">主办部门:</el-col>
          <el-col :lg="5">
            <el-tag type="primary" disable-transitions style="font-size:18px">
              {{ row.department }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">标签:</el-col>
          <el-col :lg="10">
            <el-tag
              type="success"
              size="medium"
              style="margin-right:5px;font-size:18px"
              v-for="item in this.types"
              :key="item.id"
            >
              {{ item.name }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">活动地点:</el-col>
          <el-col :lg="10">
            <el-tag type="scope" disable-transitions style="font-size:18px">{{
              row.scope === 1 ? "真的是院内" : "真的是校内"
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">负责人:</el-col>
          <el-col :lg="10">
            {{ row.worker }}
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">电话:</el-col>
          <el-col :lg="10">
            <div>{{ row.tel ? row.tel : "无" }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">发布日期:</el-col>
          <el-col :lg="10">
            <div>{{ row.createDate }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">报名截止日:</el-col>
          <el-col :lg="10">
            <div>{{ row.deadline }}</div>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">截止倒计时:</el-col>
          <el-col :lg="10">
            <CountDownIndex :time="row.deadline" paramsStyle="start" />
          </el-col>
        </el-row>
        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">剩余名额:</el-col>
          <el-col :lg="10">
            {{ row.stock }}
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row type="flex" align="center" :gutter="20" style="margin:20px;">
          <el-col :lg="3" style="text-align:end">详情:</el-col>
          <el-col :lg="20">
            <span>{{ row.detail }}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <el-row
        type="flex"
        justify="space-between"
        align="center"
        style="padding-bottom:20px"
      >
        <el-col :span="20" style="padding-left:30px">
          <span style="color:#F56C6C">可下载资源文件:</span>
          <el-button
            type="primary"
            v-for="(item, index) in com_list"
            :key="index"
            @click="currentTab(index)"
          >
            {{ item }}
          </el-button>
        </el-col>
        <el-col :span="4" style="text-align:end;padding-right:30px">
          <el-button
            :type="row.flag == 0 ? 'primary' : 'danger'"
            @click="signUp(row)"
            :disabled="row.flag == 0 ? flase : true"
          >
            {{ row.flag == 0 ? "我要报名" : "已报名" }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import activeApi from "../../../api/HotEvent";
import { mapMutations } from "vuex";
import eventsApi from "../../../api/HotEvent";
import { download } from "../../../utils/tool";

export default {
  data() {
    return {
      com_list: [],
      types: {},
      isfile: false,
      row: {},
      TimeEnd: true,
      orderAttachment: []
    };
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    currentTab(index) {
      this.bulkDownload(index);
    },
    // 下载文件
    bulkDownload(index) {
      const url = this.orderAttachment[index].filePath;
      download(url, this.orderAttachment[index].fileName);
    },

    // 报名
    signUp(row) {
      const user = JSON.parse(localStorage.getItem("sy"));
      console.log("信息是：");
      console.log(user);
      this.$confirm(
        `${user.name} 同学, 是否要报名${row.name ? row.name : this.row.name}?`,
        "报名",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(async () => {
        const loading = this.$loading({
          lock: true,
          text: "加急报名中!!!",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        //发请求
        loading.close();
        const data = await eventsApi.activeEnroll({
          uid: row.id ? row.id : this.row.id
        });
        if (data.code === 0) {
          this.$message({
            type: "success",
            message: data.msg
          });
          loading.close();
          location.reload([true]);
        } else {
          this.$message({
            type: "error",
            message: data.msg
          });
          loading.close();
        }
      });
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消报名"
      //   });
      // });
    },
    //转换时间戳
    timeChange(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },

    ...mapMutations(["activeIndexUpdate"])
  },

  async mounted() {
    this.id = this.$route.params.id;
    const { code, data } = await activeApi.activeDetail(this.id);
    console.log("数据是:");
    console.log(data);
    this.types = data.types;
    if (data.fileList.length === 0) {
      this.isfile = false;
      console.log("文件是空的");
    } else {
      this.isfile = true;
      this.orderAttachment = data.fileList;
      for (let i = 0; i < data.fileList.length; i++) {
        this.com_list[i] = data.fileList[i].fileName;
      }
    }
    if (code == 0) {
      data.createDate = this.timeChange(data.createDate);
      data.deadline = this.timeChange(data.deadline);
      this.row = data;
      this.$emit("loading");
    } else {
      this.$message.error("没找到活动!");
      // this.$router.push("/info/activity");
    }
  }
};
</script>

<style scoped>
.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.go-back {
  font-weight: 600;
  padding: 20px 0;
  width: 80%;
  margin: auto;
}
.box-card {
  font-weight: 600;
  width: 80%;
  margin: auto;
}
.cardName {
  width: 100%;
  text-align: center;
  font-size: 26px;
}
.el-form-item {
  margin: 0;
}
el-form-item {
  font-size: x-large;
}
.el-tabs__item {
  font-size: 18px;
}
</style>
